<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="initial-scale=1.0,
                   maximum-scale=1.0">
    <title>进阶篇-vue-router10分钟快速入门</title>
    <script src="../js/lib/vue.min.js"></script>
    <script src="../js/lib/vue-router.js"></script>
    <style>
        a {
            display: block
        }
        .content {
            margin-top: -40px;
            margin-left: 80px;
        }
    </style>
</head>
<body>
<!--使用route-link组件导航-->
<!--使用to属性指定链接-->
<div id="app" class="app">
    <div class="nav">
        <router-link to="/vue">简易vue</router-link>
        <router-link to="/es6">趣味ES6</router-link>
        <router-link to="/career">人在职场</router-link>
    </div>
    <div class="content">
        <router-view></router-view>
    </div>
</div>
<script>
    //定义路由对应的三个组件
    const vueComponent={
        template:`<div>这里是简易vue教程</div>`
    };
    const es6Component={
        template:`<div>这里是《趣味ES6》教程</div>`
    };
    const careerComponent={
        template:`<div>《混口饭吃》与《工资待遇》</div>`
    };
    //创建route实例，并定义导航与组件的映射关系
    const router=new VueRouter({
       //配置routes
       routes:[
           {
               path:'/vue',
               component: vueComponent
           },{
               path:'/es6',
               component: es6Component
           },{
               path:'/career',
               component: careerComponent
           }
       ]
    });
    //最后一步，创建vue实例，添加route
    const app = new Vue({
        el:'#app',
        router
    });
</script>
</body>
</html>